<template>
    <div>

        <div class="cards">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
  
                    <el-button style="background: #7052ff; color:#fff;" @click="saveRow">新增</el-button>
                    <div>

                        <el-table @row-click="handleRowClick" :data="tableData" style="width: 100%; margin-bottom: 20px;margin-top:20px" row-key="id"
                            v-loading="loading" :tree-props="{ children: 'dictDataList' }" >
                            <el-table-column prop="name" label="名称"   />

                            <!-- <el-table-column prop="value" label="公式" align="center"></el-table-column> -->
                            <el-table-column prop="typeCode" label="参数标识" align="center" ></el-table-column>
                            <!-- <el-table-column prop="code" label="字典Code" align="center"></el-table-column> -->
                            <!-- <el-table-column prop="unit" label="单位" align="center">
                                 <template #default="{ row }">
                                    <span v-if="row.unit">{{ row.unit }}</span>
                                    <span v-else>-</span>
                                </template>
                            </el-table-column> -->
                            <el-table-column prop="sort" label="排序" align="center"></el-table-column>
                            
                            <el-table-column fixed="right" label="操作" width="280" align="center">
                                <template #default="scope">
                                    <el-button style="color: #7052ff ;" link size="small"
                                        @click.prevent="AddRow(scope.$index, scope.row)"> 新增子级</el-button>
                                    <el-button style="color: #7052ff ;" link size="small"
                                            @click.prevent="editRows(scope.$index, scope.row)" v-if="!scope.row.isTopLevel"> 编辑子级</el-button>
                                    <el-button style="color: #7052ff ;" link size="small"
                                                @click.prevent="editRow(scope.$index, scope.row)" v-if="scope.row.isTopLevel"> 编辑</el-button>
                                    <el-button style="color: #7052ff ;" link size="small"
                                        @click.prevent="deleteRow(scope.$index, scope.row)" v-if="scope.row.isTopLevel"> 删除</el-button>
                                    <el-button style="color: #7052ff ;" link size="small"
                                                @click.prevent="deleteRows(scope.$index, scope.row)" v-if="!scope.row.isTopLevel"> 删除子级</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
         
            </el-tabs>

        </div>



        <el-dialog v-model="drawer" :title="Tips" width="600" :before-close="handleClose">
            <el-form ref="ruleFormRef" :rules="rules" :model="uttForm" label-width="auto">
                <p style="margin-bottom:10px;font-size:16px">材料信息</p>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="uttForm.name" placeholder="请填写" />
                </el-form-item>
                <el-form-item label="参数值" prop="code">
                    <el-input v-model="uttForm.code" placeholder="请填写" />
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input placeholder="请填写" v-model="uttForm.sort"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="Close()">取消</el-button>
                <el-button style="background: #7052ff; color:#fff;" @click="hanadd()">保存</el-button>
            </template>
        </el-dialog>


        <el-dialog :title="Tips" size="60%" width="600" :before-close="handleClose" v-model="AddRowShow">
            <el-form ref="ruleFormRef1" :rules="rules1" :model="form" label-width="auto">
                <p style="margin-bottom:10px;font-size:16px">材料信息</p>
                <el-form-item label="名称" prop="name">
                    <el-input v-model="form.name" placeholder="请填写" />
                </el-form-item>
                <el-form-item label="参数类型" prop="typeCode">
                    <el-select v-model="form.typeCode">
                        <el-option :value="item.code" :label="item.name" v-for="(item,index) in list" :key="index"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="参数值Code" prop="code">
                    <el-input v-model="form.code" placeholder="请填写" />
                </el-form-item>
                <el-form-item label="参数值Value" prop="value">
                    <el-input v-model="form.value" placeholder="请填写" />
                </el-form-item>
                <el-form-item label="单位" >
                    <el-input v-model="form.unit" placeholder="请填写" />
                </el-form-item>
                <el-form-item label="排序" prop="sort">
                    <el-input placeholder="请填写" v-model="form.sort"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <el-button @click="Close()">取消</el-button>
                <el-button style="background: #7052ff; color:#fff;" @click="handleSaveAdd()">报存</el-button>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { defineAsyncComponent, onMounted, reactive, computed, ref } from 'vue';
import type { TabsPaneContext } from 'element-plus'
import { ElMessage, ElMessageBox, FormRules, FormInstance } from 'element-plus'
const Card = defineAsyncComponent(() => import('@/components/cards/index.vue'))
import { User, Plus, Warning, QuestionFilled } from '@element-plus/icons-vue';
import { diList, dictEdit, dictList, dictAdd , dictTypeList , dictTypeAdd , dictTypeEdit , dictTypeDel , dictDel } from '@/api/index'


const drawer = ref(false)
const activeName = ref('first')

const Tips = ref('新增')
const current = ref<number>(1)
const total = ref<number>(0)
const ruleFormRef = ref<FormInstance>()
const ruleFormRef1 = ref<FormInstance>()

const uttForm = ref({
    id: '',
    code: '',
    sort: '',
    name: ''
})
const form = ref({
    name: '',
    typeCode: '',
    code: '',
    unit: '',
    value: '',
    sort:''
})

const dictData = ref([])

const hanaddss = async () => {
    await dictEdit(uttForm1.value)
    await GetPage()
    drawer1.value = false
}

const drawer1 = ref(false)
const uttForm1 = ref({
    id:'',
    name: '',
    typeCode: '',
    code: '',
    unit: '',
    value: '',
    sort: ''
})

const ifs = ref(false)
const  handleRowClick = (row:any, column:any, event:any) => {
    if (row.dictDataList && row.dictDataList.length > 0) {
        console.log('点击了顶级行:', row);

    } else {
        console.log('点击了子集行:', row);
        if(!ifs.value) AddRowShow.value = true
        
        form.value = row
    }
}
const hanadd = async () => {
    ruleFormRef.value?.validate( async (volid: any) => {
        if (volid) {
            if (Tips.value == '新增') {
                await dictTypeAdd(uttForm.value)
            } else {
                await dictTypeEdit(uttForm.value)
            }
            
            drawer.value = false
            await GetPage()
            ruleFormRef.value?.resetFields()
        }
    })
    
}

const Close = () => {
    AddRowShow.value = false
    drawer.value = false
    drawer1.value = false
    ruleFormRef.value?.resetFields()
    ruleFormRef1.value?.resetFields()
}

const loading1 = ref(false)
const AddRowShow = ref(false)
const list = ref([])

const pagesA = ref({
    pageNo: 1,
    pageSize: 500,
})
const AddRow = async (i: any, row: any) => {
    Tips.value = '新增'
    AddRowShow.value = true
    console.log('---', row)
    uttForm1.value = row
    form.value.typeCode = row.code
}



const pages = ref({
    pageNo: 1,
    pageSize: 1000,
})
const loading = ref(false)
// 默认选中的值

const GetPage = async () => {
    console.log('-=-=-=',)
    loading.value = true
    const res = await dictList(pages.value)
    res.data.data.forEach((item: any) => {
        item.isTopLevel = true
    })
    tableData.value = res.data.data
    console.log('-=-=-ss=', tableData.value)

    if (res.code == 200) {
        loading.value = false
    }
    const tps = await dictTypeList(pages.value)
    list.value = tps.data

    const typ = await diList({})
    dictData.value = typ.data
}

onMounted(() => {
    GetPage()
})

const handleClose = () => {
    drawer.value = false
    AddRowShow.value = false
    drawer1.value = false
    ruleFormRef.value?.resetFields()
    ruleFormRef1.value?.resetFields()
}

const editRow = async (i: String, row: Object) => {
    Tips.value = '编辑'
    uttForm.value = row
    drawer.value = true

}
const editRows = async (i: String, row: Object) => {
    Tips.value = '编辑子级'
    AddRowShow.value = true

}


const saveRow = async () => {
    drawer.value = true
    Tips.value = '新增'
}


const handleSizeChange = (val: number) => {
    console.log(`${val} items per page`)
    pages.value.pageSize = val
    GetPage()
}
const handleCurrentChange = (val: number) => {
    console.log(`current page: ${val}`)
    pages.value.pageNo = val
    GetPage()
}

const deleteRows = (i: String, row: any) => {
    console.log('res', row, i)
    ifs.value = true
    ElMessageBox.confirm(
        '是否确认删除?',
        '提示',
        {
            confirmButtonText: '确认删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const res =  await dictDel(row.id)
            if (res.code === 200) {
                GetPage()
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                })
            }

        })
}

const deleteRow = (i: String, row: any) => {
    console.log('res', row,i)
    ifs.value = true
    ElMessageBox.confirm(
        '是否确认删除?',
        '提示',
        {
            confirmButtonText: '确认删除',
            cancelButtonText: '取消',
            type: 'warning',
        }
    )
        .then(async () => {
            const res = await dictTypeDel(row.id) 
            if (res.code === 200) {
                GetPage()
                ElMessage({
                    type: 'success',
                    message: '删除成功',
                })
            }

        })
}



const tableData = ref([])


const rules = reactive<FormRules<RuleForm>>({
    name: [{ required: true, message: '请填写', trigger: 'blur' }],
    code: [
        { required: true, message: '请填写', trigger: 'blur' },
    ],
    sort: [
        { required: true, message: '请填写', trigger: 'blur' },
    ],

})
const rules1 = reactive<FormRules<RuleForm>>({
    name: [{ required: true, message: '请填写', trigger: 'blur' }],
    code: [
        { required: true, message: '请填写', trigger: 'blur' },
    ],
    sort: [
        { required: true, message: '请填写', trigger: 'blur' },
    ],
    typeCode: [{ required: true, message: '请填写', trigger: 'blur' },],
    value:[{ required: true, message: '请填写', trigger: 'blur' },]
})


const handleSaveAdd = () => {
    ruleFormRef1.value?.validate(async (valid: any) => {
        if (valid) {
            const res = Tips.value == '新增' ? await dictAdd(form.value) : await dictEdit(form.value)
            await GetPage()
            AddRowShow.value = false
            ruleFormRef1.value?.resetFields()
        } else {
            console.log('error submit!',)
        }
    })
}



const handleClick = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}

</script>

<style scoped lang="scss">
.ache_left {
    min-width: 200px;
    border-right: 1px solid #f7f4f4;
    min-height: 770px;
    padding-right: 20px;
}
</style>